<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜拳</title>
    <script>
        function f1() {
            let select = document.getElementById("chose")
            let selectChoice = parseInt(select.value);
            let im1 = document.getElementById("images1")
            let im2 = document.getElementById("images2")
            let im3 = document.getElementById("images3")
            let result = document.getElementById("result")
            let sum1 = document.getElementById("sum")
            s = sum1.innerText
            let won1 = document.getElementById("won")
            w = won1.innerText
            let lose1 = document.getElementById("lose")
            l = lose1.innerText
            let draw1 = document.getElementById("draw")
            d = draw1.innerText
            let computer = parseInt(Math.random() * 3)
            switch (selectChoice) {
                case 0:
                    im1.src = "st.jpg";
                    im3.src = "st.jpg";
                    break;
                case 1:
                    im1.src = "jd.jpg"
                    im3.src = "jd.jpg"
                    break;
                case 2:
                    im1.src = "bu.jpg";
                    im3.src = "bu.jpg";
                    break;
                default:
                    im1.src = "zb.jpg"
                    im3.src = "zb.jpg"
            }
            switch (computer) {
                case 0:
                    im2.src = "st.jpg";
                    break;
                case 1:
                    im2.src = "jd.jpg"
                    break;
                case 2:
                    im2.src = "bu.jpg";
                    break;
                default:
                    im2.src = "zb.jpg"
            }

            if (selectChoice === computer) {
                result.innerText = "平局";
                d++
                s++
            } else if ((selectChoice === 0 && computer === 1) || (selectChoice === 1 && computer === 2) || (selectChoice === 2 && computer === 3)) {
                result.innerText = "胜利"
                w++
                s++
            } else {
                result.innerText = "失败"
                l++
                s++
            }
            sum1.innerText=s;
            won1.innerText=w;
            lose1.innerText=l;
            draw1.innerText=d;
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td width="150px" align="center">
            <p align="center">你</p>
            <img src="zb.jpg" id="images1">
        </td>
        <td width="100px" align="center">VS</td>
        <td width="200px" align="center">
            <p>电脑</p>
            <img src="zb.jpg" id="images2">
        </td>
    </tr>
    <tr>
        <td colspan="3" height="80px" align="center">
            <font color="red" size="5" id="result">Are you ready?</font>
        </td>
    <tr>
        <td width="150px" align="center">
            <p>你选择了:</p>
            <img src="zb.jpg" id="images3">
        </td>
        <td width="100px" align="center">
            Choice
        </td>
        <td width="200px" align="center">
            <p>请选择出拳:</p>
            <select id="chose">
                <option value="-1">请选择</option>
                <option value="0">石头</option>
                <option value="1">剪刀</option>
                <option value="2">布</option>
            </select>
            <button onclick="f1()">确认出拳</button>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <p align="center">
                总数:<span id="sum">0</span>
                胜利:<span id="won">0</span>
                失败:<span id="lose">0</span>
                平局:<span id="draw">0</span>
            </p>
        </td>
    </tr>
</table>
</body>
</html>